<template>
  <div class="contents">
    <PanelTitle title="交易分析" />

    <div class="mt">
      <div class="infoPanel">
        <div>
          <div class="infoTitle">当前均价</div>
          <div class="infoNumss">
            <span class="infoNum">{{ panelData.tradingMarketAvgPrice }}</span>
            <span class="infoUnit">元/kg</span>
          </div>
        </div>
        <div>
          <div class="infoTitle">预期收益</div>
          <div class="infoNums">
            <span class="infoNum">{{ panelData.expectPayback }}</span>
            <span class="infoUnit">元/kg</span>
          </div>
          <div class="infoSub">同比 {{ panelData.expectPaybackRatio }}%</div>
        </div>
      </div>
      <div ref="maps" class="maps"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);

let panelData = ref({});

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/monitor/trading/analysis",
    method: "get",
    params: {
      yearly: new Date().getFullYear()
    }
  });

  panelData.value = res.data;
  let xAxis = []
  for(let item of res.data.dailyStatistList){
    for(let a of item.dailyPriceList){
      xAxis.push(a.priceDate)
    }
  }
  xAxis = Array.from(new Set(xAxis))
  xAxis.sort((a, b) => new Date(a).getTime() - new Date(b).getTime())

  let series = []
  for(let item of res.data.dailyStatistList){
    let obj = {
      name: item.marketName,
      type: 'line',
      symbol: 'none',
      smooth: true,
      data: []
    }
   
    for(let x of xAxis){
      let have = false
      for(let d of item.dailyPriceList){
        if(x == d.priceDate){
          have = true
          obj.data.push(d.price)
        }
      }
      if(!have){
        obj.data.push(0)
      }
    }
    series.push(obj)
  }
  
  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "8%",
      top: "24%",
      containLabel: true,
    },
    legend: {
      data: series.map(item => item.name),
      top: 0,
      left: fitChartSize(10),
      icon: "circle",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      textStyle: {
        //图例文字的样式
        color: "#7AFFFD",
        fontSize: fitChartSize(9),
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xAxis.map(item => item.substring(item.indexOf('-') + 1)),
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
        // showMaxLabel: false,
        // showMinLabel: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      name: "单位(元/kg)",
      nameTextStyle: {
        color: "#fff",
        fontSize: fitChartSize(9),
        padding: [0, 0, fitChartSize(0), fitChartSize(600)],
      },
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.09)", //线条颜色
        },
      },
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
    },
    series: series,
  });
});
</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(100);
  width: 100%;
}

.infoPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 vw(15) 0;

  > div {
    box-sizing: border-box;
    width: vw(160);
    height: vh(80);
    background: rgba(9, 36, 44, 0.4);
    border: vh(1) solid #43e7ff;
    padding: 0 vw(20) 0px;
    margin: vh(6) 0;
  }
  .infoTitle {
    color: #fff;
    font-size: vh(10);
    line-height: vh(30);
  }
  .infoNums {
    line-height: vh(20);
  }
  .infoNumss {
    line-height: vh(36);
  }
  .infoNum {
    color: #adffd7;
    font-size: vh(22);
    font: SourceHanSansCN-Bold;
  }
  .infoUnit {
    color: #adffd7;
    font-size: vh(14);
    font: SourceHanSansCN-Bold;
    margin-left: vw(4);
  }
  .infoSub {
    font-weight: 400;
    font-size: vh(10);
    color: #adffd7;
    line-height: vh(20);
  }
}
</style>